import dayjs from 'dayjs'
// 封装函数，把相同的剪过来，把不同的通过传参传过来，外面需要用什么就在封装的地方进行 return
import { computed, ref } from 'vue'
import { useIntervalFn, useIntersectionObserver } from '@vueuse/core'

export const useObserver = (callback) => {
  const target = ref(null)
  // target 观测的目标，可以是一个 DOM 或一个组件实例
  // stop 停止观测
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    // isIntersecting => 如果目标进入可视区啦，就是 true
    if (isIntersecting) {
      // console.log('进入可视区啦')
      // 进入可视区才发请求
      callback()
      // 停止观测，后续再进入可视区，这儿也不会被触发啦
      stop()
    }
  })
  return { target }
}

export const useCountDown = (startCount = 60) => {
  const countTime = ref(0)
  const countTimeText = computed(() => {
    return dayjs.unix(countTime.value).format('mm分ss秒')
  })
  // pause 暂停
  // resume 继续
  const { pause, resume } = useIntervalFn(() => {
    if (countTime.value <= 0) {
      countTime.value = 0
      // 停止倒计时
      pause()
      return
    }
    countTime.value--
  }, 1000)

  const start = (n) => {
    countTime.value = n || startCount
    // 继续
    resume()
  }
  return { countTime, pause, resume, start, countTimeText }
}
